<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%--<%--%>
<%--	pageContext.setAttribute("APP_PATH", request.getContextPath());--%>
	<%
		pageContext.setAttribute("APP_PATH",request.getContextPath());
	%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->
<script type="text/javascript"
	src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">员工修改</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">empName</label>
		    <div class="col-sm-10">
		      	<p class="form-control-static" id="empName_update_static"></p>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">email</label>
		    <div class="col-sm-10">
		      <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@atguigu.com">
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">gender</label>
		    <div class="col-sm-10">
		      <label class="radio-inline">
				  <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
				</label>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">deptName</label>
		    <div class="col-sm-4">
		    	<!-- 部门提交部门id即可 -->
		      <select class="form-control" name="dept_name">

		      </select>
		    </div>
		  </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
      </div>
    </div>
  </div>
</div>



<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">empName</label>
		    <div class="col-sm-10">
		      <input type="text" name="emp_name" class="form-control" id="empName_add_input" placeholder="empName">
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">email</label>
		    <div class="col-sm-10">
		      <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">gender</label>
		    <div class="col-sm-10">
		      <label class="radio-inline">
				  <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
				</label>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">deptName</label>
		    <div class="col-sm-4">
		    	<!-- 部门提交部门id即可 -->
		      <select class="form-control" name="dept_name">

		      </select>
		    </div>
		  </div>
			  <div class="form-group">
				  <label class="col-sm-2 control-label">deptId</label>
				  <div class="col-sm-4">
					  <select class="form-control2" name="d_id">

					  </select>
				 </div>
			  </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>


	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="check_all"/>
							</th>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
			</div>
		</div>

		<!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">
				
			</div>
		</div>
		
	</div>
	<script type="text/javascript">

<%--		var totalRecord,currentPage;--%>
<%--		//1、页面加载完成以后，直接去发送ajax请求,要到分页数据--%>
<%--		$(function(){--%>
<%--			//去首页--%>
<%--			to_page(1);--%>
<%--		});--%>
<%--		--%>
<%--		function to_page(pn){--%>
<%--			$.ajax({--%>
<%--				url:"${APP_PATH}/emps",--%>
<%--				data:"pn="+pn,--%>
<%--				type:"GET",--%>
<%--				success:function(result){--%>
<%--					//console.log(result);--%>
<%--					//1、解析并显示员工数据--%>
<%--					build_emps_table(result);--%>
<%--					//2、解析并显示分页信息--%>
<%--					build_page_info(result);--%>
<%--					//3、解析显示分页条数据--%>
<%--					build_page_nav(result);--%>
<%--				}--%>
<%--			});--%>
<%--		}--%>
<%--		--%>
<%--		function build_emps_table(result){--%>
<%--			//清空table表格--%>
<%--			$("#emps_table tbody").empty();--%>
<%--			var emps = result.extend.pageInfo.list;--%>
<%--			$.each(emps,function(index,item){--%>
<%--				var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");--%>
<%--				var empIdTd = $("<td></td>").append(item.empId);--%>
<%--				var empNameTd = $("<td></td>").append(item.empName);--%>
<%--				var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");--%>
<%--				var emailTd = $("<td></td>").append(item.email);--%>
<%--				var deptNameTd = $("<td></td>").append(item.department.deptName);--%>
<%--				/**--%>
<%--				<button class="">--%>
<%--									<span class="" aria-hidden="true"></span>--%>
<%--									编辑--%>
<%--								</button>--%>
<%--				*/--%>
<%--				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")--%>
<%--								.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");--%>
<%--				//为编辑按钮添加一个自定义的属性，来表示当前员工id--%>
<%--				editBtn.attr("edit-id",item.empId);--%>
<%--				var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")--%>
<%--								.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");--%>
<%--				//为删除按钮添加一个自定义的属性来表示当前删除的员工id--%>
<%--				delBtn.attr("del-id",item.empId);--%>
<%--				var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);--%>
<%--				//var delBtn = --%>
<%--				//append方法执行完成以后还是返回原来的元素--%>
<%--				$("<tr></tr>").append(checkBoxTd)--%>
<%--					.append(empIdTd)--%>
<%--					.append(empNameTd)--%>
<%--					.append(genderTd)--%>
<%--					.append(emailTd)--%>
<%--					.append(deptNameTd)--%>
<%--					.append(btnTd)--%>
<%--					.appendTo("#emps_table tbody");--%>
<%--			});--%>
<%--		}--%>
<%--		//解析显示分页信息--%>
<%--		function build_page_info(result){--%>
<%--			$("#page_info_area").empty();--%>
<%--			$("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"+--%>
<%--					result.extend.pageInfo.pages+"页,总"+--%>
<%--					result.extend.pageInfo.total+"条记录");--%>
<%--			totalRecord = result.extend.pageInfo.total;--%>
<%--			currentPage = result.extend.pageInfo.pageNum;--%>
<%--		}--%>
<%--		//解析显示分页条，点击分页要能去下一页....--%>
<%--		function build_page_nav(result){--%>
<%--			//page_nav_area--%>
<%--			$("#page_nav_area").empty();--%>
<%--			var ul = $("<ul></ul>").addClass("pagination");--%>
<%--			--%>
<%--			//构建元素--%>
<%--			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));--%>
<%--			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));--%>
<%--			if(result.extend.pageInfo.hasPreviousPage == false){--%>
<%--				firstPageLi.addClass("disabled");--%>
<%--				prePageLi.addClass("disabled");--%>
<%--			}else{--%>
<%--				//为元素添加点击翻页的事件--%>
<%--				firstPageLi.click(function(){--%>
<%--					to_page(1);--%>
<%--				});--%>
<%--				prePageLi.click(function(){--%>
<%--					to_page(result.extend.pageInfo.pageNum -1);--%>
<%--				});--%>
<%--			}--%>
<%--			--%>
<%--			--%>
<%--			--%>
<%--			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));--%>
<%--			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));--%>
<%--			if(result.extend.pageInfo.hasNextPage == false){--%>
<%--				nextPageLi.addClass("disabled");--%>
<%--				lastPageLi.addClass("disabled");--%>
<%--			}else{--%>
<%--				nextPageLi.click(function(){--%>
<%--					to_page(result.extend.pageInfo.pageNum +1);--%>
<%--				});--%>
<%--				lastPageLi.click(function(){--%>
<%--					to_page(result.extend.pageInfo.pages);--%>
<%--				});--%>
<%--			}--%>
<%--			--%>
<%--			--%>
<%--			--%>
<%--			//添加首页和前一页 的提示--%>
<%--			ul.append(firstPageLi).append(prePageLi);--%>
<%--			//1,2，3遍历给ul中添加页码提示--%>
<%--			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){--%>
<%--				--%>
<%--				var numLi = $("<li></li>").append($("<a></a>").append(item));--%>
<%--				if(result.extend.pageInfo.pageNum == item){--%>
<%--					numLi.addClass("active");--%>
<%--				}--%>
<%--				numLi.click(function(){--%>
<%--					to_page(item);--%>
<%--				});--%>
<%--				ul.append(numLi);--%>
<%--			});--%>
<%--			//添加下一页和末页 的提示--%>
<%--			ul.append(nextPageLi).append(lastPageLi);--%>
<%--			--%>
<%--			//把ul加入到nav--%>
<%--			var navEle = $("<nav></nav>").append(ul);--%>
<%--			navEle.appendTo("#page_nav_area");--%>
<%--		}--%>
<%--		--%>
<%--		//清空表单样式及内容--%>
<%--		function reset_form(ele){--%>
<%--			$(ele)[0].reset();--%>
<%--			//清空表单样式--%>
<%--			$(ele).find("*").removeClass("has-error has-success");--%>
<%--			$(ele).find(".help-block").text("");--%>
<%--		}--%>
<%--		--%>
<%--		//点击新增按钮弹出模态框。--%>
<%--		$("#emp_add_modal_btn").click(function(){--%>
<%--			//清除表单数据（表单完整重置（表单的数据，表单的样式））--%>
<%--			reset_form("#empAddModal form");--%>
<%--			//s$("")[0].reset();--%>
<%--			//发送ajax请求，查出部门信息，显示在下拉列表中--%>
<%--			getDepts("#empAddModal select");--%>
<%--			//弹出模态框--%>
<%--			$("#empAddModal").modal({--%>
<%--				backdrop:"static"--%>
<%--			});--%>
<%--		});--%>
<%--		--%>
<%--		//查出所有的部门信息并显示在下拉列表中--%>
<%--		function getDepts(ele){--%>
<%--			//清空之前下拉列表的值--%>
<%--			$(ele).empty();--%>
<%--			$.ajax({--%>
<%--				url:"${APP_PATH}/depts",--%>
<%--				type:"GET",--%>
<%--				success:function(result){--%>
<%--					//{"code":100,"msg":"处理成功！",--%>
<%--						//"extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}--%>
<%--					//console.log(result);--%>
<%--					//显示部门信息在下拉列表中--%>
<%--					//$("#empAddModal select").append("")--%>
<%--					$.each(result.extend.depts,function(){--%>
<%--						var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);--%>
<%--						optionEle.appendTo(ele);--%>
<%--					});--%>
<%--				}--%>
<%--			});--%>
<%--			--%>
<%--		}--%>
<%--		--%>
<%--		//校验表单数据--%>
<%--		function validate_add_form(){--%>
<%--			//1、拿到要校验的数据，使用正则表达式--%>
<%--			var empName = $("#empName_add_input").val();--%>
<%--			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;--%>
<%--			if(!regName.test(empName)){--%>
<%--				//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");--%>
<%--				show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");--%>
<%--				return false;--%>
<%--			}else{--%>
<%--				show_validate_msg("#empName_add_input", "success", "");--%>
<%--			};--%>
<%--			--%>
<%--			//2、校验邮箱信息--%>
<%--			var email = $("#email_add_input").val();--%>
<%--			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;--%>
<%--			if(!regEmail.test(email)){--%>
<%--				//alert("邮箱格式不正确");--%>
<%--				//应该清空这个元素之前的样式--%>
<%--				show_validate_msg("#email_add_input", "error", "邮箱格式不正确");--%>
<%--				/* $("#email_add_input").parent().addClass("has-error");--%>
<%--				$("#email_add_input").next("span").text("邮箱格式不正确"); */--%>
<%--				return false;--%>
<%--			}else{--%>
<%--				show_validate_msg("#email_add_input", "success", "");--%>
<%--			}--%>
<%--			return true;--%>
<%--		}--%>
<%--		--%>
<%--		//显示校验结果的提示信息--%>
<%--		function show_validate_msg(ele,status,msg){--%>
<%--			//清除当前元素的校验状态--%>
<%--			$(ele).parent().removeClass("has-success has-error");--%>
<%--			$(ele).next("span").text("");--%>
<%--			if("success"==status){--%>
<%--				$(ele).parent().addClass("has-success");--%>
<%--				$(ele).next("span").text(msg);--%>
<%--			}else if("error" == status){--%>
<%--				$(ele).parent().addClass("has-error");--%>
<%--				$(ele).next("span").text(msg);--%>
<%--			}--%>
<%--		}--%>
<%--		--%>
<%--		//校验用户名是否可用--%>
<%--		$("#empName_add_input").change(function(){--%>
<%--			//发送ajax请求校验用户名是否可用--%>
<%--			var empName = this.value;--%>
<%--			$.ajax({--%>
<%--				url:"${APP_PATH}/checkuser",--%>
<%--				data:"empName="+empName,--%>
<%--				type:"POST",--%>
<%--				success:function(result){--%>
<%--					if(result.code==100){--%>
<%--						show_validate_msg("#empName_add_input","success","用户名可用");--%>
<%--						$("#emp_save_btn").attr("ajax-va","success");--%>
<%--					}else{--%>
<%--						show_validate_msg("#empName_add_input","error",result.extend.va_msg);--%>
<%--						$("#emp_save_btn").attr("ajax-va","error");--%>
<%--					}--%>
<%--				}--%>
<%--			});--%>
<%--		});--%>
<%--		--%>
<%--		//点击保存，保存员工。--%>
<%--		$("#emp_save_btn").click(function(){--%>
<%--			//1、模态框中填写的表单数据提交给服务器进行保存--%>
<%--			//1、先对要提交给服务器的数据进行校验--%>
<%--			if(!validate_add_form()){--%>
<%--				return false;--%>
<%--			};--%>
<%--			//1、判断之前的ajax用户名校验是否成功。如果成功。--%>
<%--			if($(this).attr("ajax-va")=="error"){--%>
<%--				return false;--%>
<%--			}--%>
<%--			--%>
<%--			//2、发送ajax请求保存员工--%>
<%--			$.ajax({--%>
<%--				url:"${APP_PATH}/emp",--%>
<%--				type:"POST",--%>
<%--				data:$("#empAddModal form").serialize(),--%>
<%--				success:function(result){--%>
<%--					//alert(result.msg);--%>
<%--					if(result.code == 100){--%>
<%--						//员工保存成功；--%>
<%--						//1、关闭模态框--%>
<%--						$("#empAddModal").modal('hide');--%>
<%--						--%>
<%--						//2、来到最后一页，显示刚才保存的数据--%>
<%--						//发送ajax请求显示最后一页数据即可--%>
<%--						to_page(totalRecord);--%>
<%--					}else{--%>
<%--						//显示失败信息--%>
<%--						//console.log(result);--%>
<%--						//有哪个字段的错误信息就显示哪个字段的；--%>
<%--						if(undefined != result.extend.errorFields.email){--%>
<%--							//显示邮箱错误信息--%>
<%--							show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);--%>
<%--						}--%>
<%--						if(undefined != result.extend.errorFields.empName){--%>
<%--							//显示员工名字的错误信息--%>
<%--							show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);--%>
<%--						}--%>
<%--					}--%>
<%--				}--%>
<%--			});--%>
<%--		});--%>
<%--		--%>
<%--		//1、我们是按钮创建之前就绑定了click，所以绑定不上。--%>
<%--		//1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()--%>
<%--		//jquery新版没有live，使用on进行替代--%>
<%--		$(document).on("click",".edit_btn",function(){--%>
<%--			//alert("edit");--%>
<%--			--%>
<%--			--%>
<%--			//1、查出部门信息，并显示部门列表--%>
<%--			getDepts("#empUpdateModal select");--%>
<%--			//2、查出员工信息，显示员工信息--%>
<%--			getEmp($(this).attr("edit-id"));--%>
<%--			--%>
<%--			//3、把员工的id传递给模态框的更新按钮--%>
<%--			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));--%>
<%--			$("#empUpdateModal").modal({--%>
<%--				backdrop:"static"--%>
<%--			});--%>
<%--		});--%>
<%--		--%>
<%--		function getEmp(id){--%>
<%--			$.ajax({--%>
<%--				url:"${APP_PATH}/emp/"+id,--%>
<%--				type:"GET",--%>
<%--				success:function(result){--%>
<%--					//console.log(result);--%>
<%--					var empData = result.extend.emp;--%>
<%--					$("#empName_update_static").text(empData.empName);--%>
<%--					$("#email_update_input").val(empData.email);--%>
<%--					$("#empUpdateModal input[name=gender]").val([empData.gender]);--%>
<%--					$("#empUpdateModal select").val([empData.dId]);--%>
<%--				}--%>
<%--			});--%>
<%--		}--%>
<%--		--%>
<%--		//点击更新，更新员工信息--%>
<%--		$("#emp_update_btn").click(function(){--%>
<%--			//验证邮箱是否合法--%>
<%--			//1、校验邮箱信息--%>
<%--			var email = $("#email_update_input").val();--%>
<%--			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;--%>
<%--			if(!regEmail.test(email)){--%>
<%--				show_validate_msg("#email_update_input", "error", "邮箱格式不正确");--%>
<%--				return false;--%>
<%--			}else{--%>
<%--				show_validate_msg("#email_update_input", "success", "");--%>
<%--			}--%>
<%--			--%>
<%--			//2、发送ajax请求保存更新的员工数据--%>
<%--			$.ajax({--%>
<%--				url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),--%>
<%--				type:"PUT",--%>
<%--				data:$("#empUpdateModal form").serialize(),--%>
<%--				success:function(result){--%>
<%--					//alert(result.msg);--%>
<%--					//1、关闭对话框--%>
<%--					$("#empUpdateModal").modal("hide");--%>
<%--					//2、回到本页面--%>
<%--					to_page(currentPage);--%>
<%--				}--%>
<%--			});--%>
<%--		});--%>
<%--		--%>
<%--		//单个删除--%>
<%--		$(document).on("click",".delete_btn",function(){--%>
<%--			//1、弹出是否确认删除对话框--%>
<%--			var empName = $(this).parents("tr").find("td:eq(2)").text();--%>
<%--			var empId = $(this).attr("del-id");--%>
<%--			//alert($(this).parents("tr").find("td:eq(1)").text());--%>
<%--			if(confirm("确认删除【"+empName+"】吗？")){--%>
<%--				//确认，发送ajax请求删除即可--%>
<%--				$.ajax({--%>
<%--					url:"${APP_PATH}/emp/"+empId,--%>
<%--					type:"DELETE",--%>
<%--					success:function(result){--%>
<%--						alert(result.msg);--%>
<%--						//回到本页--%>
<%--						to_page(currentPage);--%>
<%--					}--%>
<%--				});--%>
<%--			}--%>
<%--		});--%>
<%--		--%>
<%--		//完成全选/全不选功能--%>
<%--		$("#check_all").click(function(){--%>
<%--			//attr获取checked是undefined;--%>
<%--			//我们这些dom原生的属性；attr获取自定义属性的值；--%>
<%--			//prop修改和读取dom原生属性的值--%>
<%--			$(".check_item").prop("checked",$(this).prop("checked"));--%>
<%--		});--%>
<%--		--%>
<%--		//check_item--%>
<%--		$(document).on("click",".check_item",function(){--%>
<%--			//判断当前选择中的元素是否5个--%>
<%--			var flag = $(".check_item:checked").length==$(".check_item").length;--%>
<%--			$("#check_all").prop("checked",flag);--%>
<%--		});--%>
<%--		--%>
<%--		//点击全部删除，就批量删除--%>
<%--		$("#emp_delete_all_btn").click(function(){--%>
<%--			//--%>
<%--			var empNames = "";--%>
<%--			var del_idstr = "";--%>
// 			$.each($(".check_item:checked"),function(){
// 				//this
// 				empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
// 				//组装员工id字符串
// 				del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
// 			});
<%--			//去除empNames多余的,--%>
<%--			empNames = empNames.substring(0, empNames.length-1);--%>
<%--			//去除删除的id多余的---%>
<%--			del_idstr = del_idstr.substring(0, del_idstr.length-1);--%>
<%--			if(confirm("确认删除【"+empNames+"】吗？")){--%>
<%--				//发送ajax请求删除--%>
<%--				$.ajax({--%>
<%--					url:"${APP_PATH}/emp/"+del_idstr,--%>
<%--					type:"DELETE",--%>
<%--					success:function(result){--%>
<%--						alert(result.msg);--%>
<%--						//回到当前页面--%>
<%--						to_page(currentPage);--%>
<%--					}--%>
<%--				});--%>
<%--			}--%>
<%--		});--%>





           //函数开始
		$(function(){
			//去首页
				to_page(1);
			});

        //页面加载完整之后直接发送ajax请求，要到分页数据
		 function to_page(pn){
			  $.ajax({
			  url:"${APP_PATH}/emps",
			  data:"pn="+pn,
			  type:"post",
			  //成功返回result
			   success:function (result) {
			  	//打印结果
			  	console.log(result);

			  	//解析显示员工数据
				   build_emps_table(result);
				//解析显示分页信息
				   build_page_info(result);
				//解析显示分页条数据
				   build_page_nav(result);



			        }
		         });
			}

      //解析员工数据
		function build_emps_table(result) {
			//清空表格
			$("#emps_table tbody").empty();
		 	//获取员工信息
			var emps  =result.extend.pageInfo.list;
			$.each(emps,function (index,item) {
				//1、遍历框遍历checkbox  设置 class=''
				var check_itemTd = $("<td><input type='checkbox' class='check_item'></td>")
				var emp_IdTd   = $("<td></td>").append(item.emp_id);
				var emp_nameTd = $("<td></td>").append(item.emp_name);
				var genderTd   = $("<td></td>").append(item.gender =='M'?"男":"女");
				var emailTd    = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.dept_name);

				/* 按钮
				 <button class="">
				 <span class="" aria-hidden="true"></span>
				 编辑
				 </button>
				 */

				// var edit       = $("")
				var editBtn    = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil ").append("编辑"));
				//为编辑按钮添加一个值
				editBtn.attr("edit-id",item.emp_id);

				var delBtn     = $("<button></button>").addClass("btn btn-danger btn-sm del_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除"));
				//为删除按钮添加一个值
				delBtn.attr("del-id",item.emp_id);
				var TdBtn      = $("<td></td>").addClass("").append(editBtn).append(" ").append(delBtn)
								//append方法执行完成以后还是会返回原来的函数
					$("<tr></tr>")
							    .append(check_itemTd)
							    .append(emp_IdTd)
				              	.append(emp_nameTd)
						      	.append(genderTd)
								.append(emailTd)
								.append(deptNameTd)
							    .append(TdBtn)
								.appendTo("#emps_table tbody")
			});
		}

	    //	page_nav_area（分页目录） page_info_area（分页文字）
		function build_page_info(result){
            //清空页码
			$("#page_info_area").empty();

			//显示文字页码
			$("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"" +
					"页"+"总"+result.extend.pageInfo.pages+"页"+"共"+
					result.extend.pageInfo.total+"条记录");
			    totalRecord=result.extend.pageInfo.pages;

		}

		//分页信息显示及用户信息保存
        function build_page_nav(result){

			//清空
			$("#page_nav_area").empty();
			//添加ul
			var ul  = $("<ul></ul>").addClass("pagination");
			//显示分页条
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi   = $("<li></li>").append($("<a></a>").append("&laquo;"));
				//如果没有前一页
				if(result.extend.pageInfo.hasPreviousPage ==false){
					firstPageLi.addClass("disabled");
					prePageLi.addClass("disabled");
				}else {
					//特定点击事件
					firstPageLi.click(function () {
						to_page(1);
					});
					prePageLi.click(function () {
						to_page(result.extend.pageInfo.pageNum - 1);
					});
				}
			//显示>>和末页
			var nextPageLi  = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageli  = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			//如果没有后一页
			if(result.extend.pageInfo.hasNextPage ==false){
				nextPageLi.addClass("disabled");
				lastPageli.addClass("disabled");
			}else{
				//特定点击事件
				nextPageLi.click(function() {
					to_page(result.extend.pageInfo.pageNum + 1);
				});

				lastPageli.click(function () {
					to_page(result.extend.pageInfo.total);
				});
			}
			//在ul中添加前页按钮
			ul.append(firstPageLi).append(prePageLi);
			//遍历页码
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi  = $("<li></li>").append($("<a></a>").append(item));
				//判断点击页添加样式
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				//在ul中添加页码
				ul.append(numLi);
				//添加数字页码翻页事件
				numLi.click(function () {
					to_page(item);
				});
			});
			//在ul中添加末页按钮
			ul.append(nextPageLi).append(lastPageli);
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			//添加到页码div
			navEle.appendTo("#page_nav_area");


			//查出数据
			function getDepts(ele) {
				//清空列表
				$(ele).empty();
				//调用ajax
				$.ajax({
					url:"${APP_PATH}/emps",
					type:"get",
					success:function (result) {
						console.log(result);
						//在选定模块框框中添加信息
						$.each(result.extend.pageInfo.list,function(index,item){
							var optionEle = $("<option></option>").append(this.d_id).attr("value",this.d_id);
							optionEle.appendTo(ele);
							// var optionEle2 = $("<option></option>").append(this.dept_id).attr("value",this);
							// optionEle2.appendTo("#empAddModal form-group form-control2")
						});
					}
				});
			}

			//表单重置
			function reset_form(ele) {
				//清除内容(将元素的第一个内容清除)
				$(ele)[0].reset();
				//将全部元素去除
				$(ele).find("*").removeClass("has-error has-success");
				//清空表单
				$(ele).find(".help-block").text("");


			}

			//添加弹出框拟态
			$("#emp_add_modal_btn").click(function () {
				//重置表单
				reset_form("#empAddModal form");
				// $("#emp_add_modal_btn form")[0].reset();
				//打开之前调用数据函数
				//
				getDepts("#empAddModal select");
				//传入打开模态框的id
				$("#empAddModal").modal({
					backdrop:"static"
				});
			});


			//校验（校验数据）点击后
			function vaildate_add_form(){
				//拿到要校验的用户值
				var empName = $("#empName_add_input").val();

				//校验变量
				var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
				//
				if (!regName.test(empName)){
					//如果返回值为false代表出错
					vaildate("#empName_add_input","error","用户名2位汉字以上,或者英文3-16位");
					//添加错误
					//$("#empName_add_input").parent().addClass("has-error");
					//显示校验信息
					//$("#empName_add_input").next("span").text("用户值错误节点");
					return false;
				} else {
					//成功
					vaildate("#empName_add_input","success","");

				}
				//校验邮箱的信息
				var email = $("#email_add_input").val();
				//校验变量
				var regEmail =/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
				if (!regEmail.test(email)) {
					//添加错误信息
					vaildate("#email_add_input","error","邮箱格式不正确");
					// $("#empName_add_input").parent().addClass("has-error");
					//
					// $("#empName_add_input").next("span").text("邮箱错误");
					return false;
				}else{
					//成功
					vaildate("#email_add_input","success","");
					//函数结束
					return true;
				}
				}

			//校验函数
			function vaildate(ele,status,mes) {
				//清除样式
				$(ele).parent().removeClass("has-error");
				$(ele).parent().removeClass("has-success");
				//如果status为error
				if ("error" == status) {
					$(ele).parent().addClass("has-error");
					$(ele).next("span").text(mes);
					//如果为success
				} else if ("success" == status) {
					$(ele).parent().addClass("has-success");
					$(ele).next("span").text(mes);
				}
			}

			//校验用户名是否重复（输入时）
			$("#empName_add_input").change(function () {
				var emp_name = this.value;
				$.ajax({
					url:"${APP_PATH}/check",
					type:"post",
					data:"emp_name="+emp_name,
					success:function(result){
						if(result.code==100){
							vaildate("#empName_add_input","success"," ");
							$("#emp_save_btn").attr("ajax-va","success");
						}else{
							vaildate("#empName_add_input","error",result.extend.va_msg);
							$("#emp_save_btn").attr("ajax-va","error");
						}
					}
				});
			});

			//用户保存按钮编辑
			$("#emp_save_btn").click(function () {
				//点击后首先进行校验(此处为前端校验)
				//调用校验函数校验失败程序暂停
				if(!vaildate_add_form()){
					return false;


			};
				//2、用户名是否重复校验（保存按钮）
				if($(this).attr("ajax-va")=="error"){
					return false;
				};

				$.ajax({
					url:"${APP_PATH}/emp",
					type:"post",
					data:$("#empAddModal form").serialize(),
					success:function(result){
						if(result.code == 100){
							// alert(result);
							//模态框关闭
							$("#empAddModal").modal('hide');
							//去到最后一页查看
							to_page(totalRecord);
						}else{
							console.log(result);
							alert(result.extend.errors.email);
							if(undefined!=result.extend.errors.email){
								//显示邮箱错误信息
								vaildate("#email_add_input","error",result.extend.errors.email);
							}
							if(undefined!=result.extend.errors.emp_name){
								//显示用户名错误信息
								vaildate("#empName_add_input","error",result.extend.errors.emp_name);
							}

						}
					}
				});
			});


			//点击更新按钮
			$(document).on("click",".edit_btn",function (){

				//用this获取当前对象id
				var empId = $(this).attr("edit-id");
				// getDepts("empUpdateModal select");
				//获取数据
				getEmp(empId);
				//弹出模态框
				$("#empUpdateModal").modal({
					backdrop: "static"

				});



			});
			//查询员工信息函数
			function getEmp(Id){
				$.ajax({
					url:"${APP_PATH}/emp/"+Id,
					type:"GET",
					success:function(){

						//获取数据
						var empData  = result.extend.Emp

							$("#empName_update_static").text(empData.emp_name);
						    $("#email_update_input").val(empData.email);
						    $("#empUpdateModal input[name=gender]").val([empData.gender]);
						    $("#empUpdateModal select").val(empData.d_id);
					}

				});

			}
			//点击删除信息按钮
			$(document).on("click",".del_btn",function(){
				//
				// alert("123");
				//1、获取emps的姓名:用 parents  .find("找到第一个td.eq(1)”).text()
				var empName = $(this).parents("tr").find("td:eq(2)").text();
				//
				var empId   = $(this).attr("del-id");
				//、if( 校验确认框信息（confirm））如果成功则发送ajax信息)
				    if(confirm("确认删除"+empName+"吗?")){
				    	$.ajax({
				    		url:"${APP_PATH}/emp/"+empId,
							type:"DELETE",
							success:function () {
				    			// alert(result.msg);
				    			//回到本页
								// to_page(currentPage);
								to_page(1);
							}
						});
					}
			});

			//点击全选事件
			$("#check_all").click(function () {
            // 点击全选下边跟着选中，设置check_all函数,用prop（prop用于读取原生属性）获取checked的值进行输出，attr获取常用的值
				$(".check_item").prop("checked",$(this).prop("checked"));

			});
			//全选自动按钮
			$(".check_item").click(function () {

				var flag= $(".check_item:checked").length==$(".check_item").length;
				$("#check_all").prop("checked",flag);

			});

			//批量删除
			$('#emp_delete_all_btn').click(function (){

				var courrentPage = result.extend.pageInfo.pageNum;
				var delid_str = "";
				var empName   = "";
				//弹出确认框确认弹出的数据的值然后通过遍历选中值加上逗号，截取字符串（多余的逗号）
				$.each($(".check_item:checked"),function (){

					 delid_str += $(this).parents("tr").find("td:eq(1)").text() + "-";
					 empName   += $(this).parents("tr").find("td:eq(2)").text() + ",";

				});

				empName   = empName.substring(0,empName.length-1);
				delid_str = delid_str.substring(0,delid_str.length-1);
                   if(confirm("确定要删除"+empName+"吗?")){
                   	$.ajax({
						url:"${APP_PATH}/emp/"+delid_str,
						type:"DELETE",
						success:function(){
							alert(result.message);
							to_page(courrentPage);
						}

					});


				   }


			});



}


</script>
</body>
</html>